<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery\jquery.js"></script>
</head>
<body>
    
    <input type="checkbox" value="足球"> 足球<br>
    <input type="checkbox" value="篮球"> 篮球<br>
    <input type="checkbox" value="排球"> 排球<br>
    <input type="checkbox" value="乒乓球"> 乒乓球<br>
    <input type="checkbox" value="保林球"> 保林球<br>
    <input type="checkbox" value="保林球"> 保林球<br>
    <hr>
    <input type="button" value="全选"><br>
    <input type="button" value="不选"><br>
    <input type="button" value="反选"><br>
    <input type="button" value="提交"><br>

    <script> 

            //属性选择器
        $(function(){
            $(":button:eq(0)").click(function(){
                // alert("hello");
                $(":checkbox").prop("checked",true); //全选
            })
            $(":button:eq(1)").click(function(){
                // alert("hello");
                $(":checkbox").prop("checked",false); //不选
            })
            //反选 each
            $(":button:eq(2)").click(function(){
                // alert("hello");
                $(":checkbox").each(function(){
                    //判断当前复选框是否选中
                    if($(this).prop("checked")==true){
                    $(this).prop("checked",false);
                }else{
                    $(this).prop("checked",true);
                }
                });  
            });
            $(":button:eq(3)").click(function(){
                // alert("hello");
                var str= "" ; //全局变量
                $(":checkbox").each(function(){
                    //判断当前复选框是否选中
                    if($(this).prop("checked")==true){
                    // var str;
                    //str += $(this).val()+"\n";    //读取value值 
                    str = str+$(this).val()+"\n";    //读取value值 
                }
                }); 
                alert(str); 
            });


            // $(":button").click(function(){
                
            //     $(":checkbox").prop("checked",false); //不选
            // })
        });
    </script>
    <br>
    <p>List 1:</p>
        <ul>
            <li>coffee</li>
            <li>milk</li>
            <li>tea</li>
        </ul>
    <p>List 1:</p>    
        <ul>
            <li>coffee</li>
            <li>milk</li>
            <li>tea</li>
        </ul>
        <button>点我隐藏coffee</button>
        <button>提交</button>
        <input type="text" value="hello">
        <script>
            //子元素过滤器
            $(function(){
                 $(":button").click(function(){
                    // var str; 
                    // str = $(":text").val();
                    // alert(str);
                    $("ul li:nth-child(1)").hide();//隐藏两个coffee
                    //$("ul li:first").hide();//只能隐藏第一个coffee
                    // $("ul li :even()").hide();//********
                 });
            });
        </script>
</body>
</html>